<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>zuoye3</title>
	</head>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		.box {
			width: 402px;
			height: 402px;
            border: 2px solid #000000;
		}
		.a1 {
			width: 296px;
			height: 296px;
			background: #ff00ff;
            border: 2px  solid white;
            float: left;
		}
		.a2 {
			width: 100px;
			height: 100px;
			background: #77cc11;
            float: right;
		}
		.a3 {
			width: 100px;
			height: 100px;
			background: #ffff01;
            float: right;
		}
		.a4 {
			width: 100px;
			height: 100px;
			background: #77cc11;
            float: right;
		}
		.a5 {
			width: 100px;
			height: 100px;
			background: #ffff01;
            float: right;
		}
		.a6 {
			width: 100px;
			height: 100px;
			background: #77cc11;
            float: left;
		}
		.a7 {
			width: 100px;
			height: 100px;
			background: #ffff01;
            float: left;
		}
		.a8 {
			width: 100px;
			height: 100px;
			background: #77cc11;
            float: left;
		}

	</style>
	<body>
     	<div class="box">
     		<div class="a1">第一块</div>
     		<div class="a2">第二块</div>
     		<div class="a3">第三块</div>
     		<div class="a4">第四块</div>
     		<div class="a5">第五块</div>
     		<div class="a6">第六块</div>
     		<div class="a7">第七块</div>
     		<div class="a8">第八块</div>
     	</div>
	</body>
</html>